<style lang="scss">
.scope-cepin{
    .el-tabs__item{
        padding: 0 50px;
    }
    .pie-box{
        $top:20px;
        width: 200px;
        height: 200px;
        position: relative;
        margin-right: 20px;
        overflow: hidden;
        .pie{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: -$top;
            z-index: 1;
        }
        .pie-center{
            position: absolute;
            text-align: center;
            top: 50%;
            margin-top: -$top;
            left: 50%;
            transform: translate3d(-50%,-50%,0);
            z-index: 2;
        }
    }
    .tag{
        padding: 3px 7px;
        border-radius: 15px;
        border:1px solid #999;
        margin-right: 10px;
        margin-bottom: 10px;
        color:#3f4044;
        font-size: 14px;
    }
}
</style>
<template>
    <ui-main>

        <div class="scope-cepin bg-grey">
            <!-- 统计数据 -->
            <div class="mb10 mt20 flex bg-white">
                <div class="ui-border-right p40 pl60 pr60 text-center">
                    <ui-img :url="company.company_logo" size="70px" class="ui-circle bg-grey mb15"></ui-img>
                    <div class="f21 mb10">{{company.company_name}}</div>
                    <div class="f-color-grey f14">Since {{company.setup_time}}</div>
                </div>
                <div class="flex-1 flex f16">
                    <div class="p40" style="width:500px">
                        <div class="mb20 flex col-center">
                            <b class="mr20">牌照</b>
                            <img :src="company.license_logo" height="30" class="mr10">
                        </div>
                        <div class="mb20 flex">
                            <b class="mr20">平台</b>
                            <div class="flex-1">
                                <span v-for="item in company.license_arr" class="tag">{{item}}</span>
                            </div>
                        </div>
                        <div class="flex">
                            <b class="mr20">地区</b>
                            <span v-for="item in company.area_arr" class="tag">{{item}}</span>
                        </div>
                    </div>
                    <div class="flex-1 flex">
                        <!--环形饼图  -->
                        <div class="pie-box">
                            <ui-echarts v-if="pieValue" :option="echartPie" class="pie"></ui-echarts>
                            <div v-if="good_percent" class="flex column column-col-around">
                                <div class="pie-center">
                                    <div class="f14 mr5" >菠菜指数</div>
                                    <div class="f-color-orange f24">{{pieValue}}</div>
                                </div>
                                <div class="flex f14 row-center absolute" style="bottom:10px; left:30px">
                                    <div class="flex column column-row-center mr25">
                                        <span class="f-color-grey">行业排名</span>
                                        <span>第{{score_rank}}位</span>
                                    </div>
                                    <div class="flex column column-row-center">
                                        <span class="f-color-grey">
                                            <i v-if="parseFloat(good_percent)>0">高于同行</i>
                                            <i v-else>低于同行</i>
                                        </span>
                                        <span class="f16">{{good_percent}}%</span>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="f18 f-color-grey">暂无数据</div>
                        </div>

                        <div v-if="redarValue.length>0" class="flex row-center col-center">
                            <!--雷达图  -->
                            <ui-echarts :option="echartRadar" style="width:280px;height:180px"></ui-echarts>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 测评分类 -->
            <div class="p20 bg-white">
                <el-tabs v-model="tab">
                    <el-tab-pane v-for="item in tabData" :key="item.id" :label="item.name" :name="item.name">
                        <list :node-id="item.id"></list>
                    </el-tab-pane>
                </el-tabs>
            </div> 
        </div>

    </ui-main>
</template>
<script>
    import 'echarts/lib/chart/radar'; // 雷达图
    import 'echarts/lib/component/tooltip'; // 提示框
    let orangeColor = '#ff8932'
    import list from './list'
    export default {
        components: {
            list
        },
        data () {
            return {
                tab:'产品',
                tabData:[],
                company:{},

                // echart
                redarIndicator:[],//雷达图项
                redarValue:[],//雷达图各项的值
                pieValue:null,
                good_percent:'',//高于同行
                score_rank:'',//行业排名
            }
        },
        computed: {
            echartRadar(){
                return {
                    title: {
                        text: '雷达图'
                    },
                    tooltip: {
                        position: function (pos, params, dom, rect, size) {
                            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                            var obj = {top: pos[1]-130};
                            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                            return obj;
                        }
                    },
                    radar: {
                        startAngle: 45,
                        shape: 'circle',
                        indicator: this.redarIndicator,
                        // indicator: [
                        //     { name: '运营', max: 100 },
                        //     { name: '产品', max: 100 },
                        //     { name: '硬件', max: 100 },
                        //     { name: '客服', max: 100 },
                        // ],
                        name: {
                            textStyle: {
                                color: '#777'
                            }
                        },
                    },
                    series: [{
                        type: 'radar',
                        areaStyle: {
                            normal: {
                                color: orangeColor
                            }
                        },
                        data: [
                            {
                                // value: [80, 50, 40.12, 76],
                                value: this.redarValue,
                                name: '预算分配（Allocated Budget）'
                            }
                        ]
                    }]
                }
            },
            echartPie(){
                return {
                    series: [
                        {
                            data: [
                                { value: this.pieValue, name: '' },
                                { value: 100-this.pieValue, name: '' },
                            ],
                            // name: '菠菜指数',
                            type: 'pie',
                            radius: ['40%', '50%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var colorList = [orangeColor, '#eee'];
                                        return colorList[params.dataIndex];
                                    },
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                        }
                    ]
                }
            }
        },
        mounted () {
            this.$http.get('index.php?g=home&m=PaperRecord&a=company_detail', {
                params:{
                    company_id: this.$route.query.id,
                    paper_id: 13
                }
            })
            .then(({data})=>{
                console.log('公司评测详情',data)
                if (data.code===1) {
                    // 公司详情
                    this.company = data.data

                    // 获取一级节点id
                    this.tabData = data.data.first_nodes

                    // 读取行业排名
                    this.good_percent = parseFloat(data.data.good_percent).toFixed(2)
                    this.score_rank = data.data.score_rank

                    // 菠菜指数
                    this.pieValue = data.data.score

                    // 雷达图
                    // 获取雷达图数据
                    let redarData = data.data.paper.node_info
                    for (let key in redarData) {
                        let item = redarData[key]
                        this.redarIndicator.push({name:item.node_name, max:100})
                        this.redarValue.push(item.totalScore)
                    }
                    // redarData.forEach((item) => {
                    //     this.redarIndicator.push({name:item.node_name, max:100})
                    //     this.redarValue.push(item.totalScore)
                    // })
                }else{
                    this.$alert(data.msg)
                }
            }) 

        },
    }
</script>
